<template>
	<transition name="fade">
		<div :class="['plugins-message-box',type]" v-show="visible">
			<div :class="['message-icon','iconfont',iconClass]"></div>
			<div class="message-container">{{message}}</div>
		</div>
	</transition>
</template>

<script>
	const typeClass = {
		success: 'icon-happy',
		error: 'icon-error',
		default: 'icon-success',
		loading: 'icon-loading icon-loading-animate'
	};
	export default {
		name: "messageMain",
		data() {
			return {
				visible: false,
				type: 'default',
				icon: '',
				message: '',
				duration: 2000
			}
		},
		computed: {
			iconClass() {
				if (this.icon) {
					return this.icon;
				} else {
					return typeClass[this.type];
				}
			}
		}
	}
</script>
